<template>
  <div class="component-addcontract">
    <div class="component-mainHeader">
      <div class="top">
        <div class="topleft">
          <p>
            <span class="iconfont" style="color:#1abc9a;margin-right:3px;">&#xe607;</span>
            添加合同-真实单项（无框架）
          </p>
        </div>

        <div class="topright">
          <el-button type="info" @click="$router.go(-1)">
            <span style="font-weight:700;margin-right:5px;" class="iconfont">&#xe606;</span>
            返回
          </el-button>
        </div>
      </div>

      <!-- 中间部分 -->

      <div class="component-main">
        <div class="component-main-left">
          <div class="box1">
            <span class="iconfont">&#xe67e;</span>

            <span>基本信息</span>

            <div class="arrow"></div>
          </div>
        </div>

        <!-- 表单部分 -->

        <div class="component-main-right">
          <div class="box">
            <el-form
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
              :inline="true"
            >
              <el-form-item label="单项合同编号：" prop="username" label-width="150px">
                <el-input v-model="ruleForm.username" style="width: 300px;" clearable></el-input>
              </el-form-item>

              <el-form-item label="内部合同编号：" prop="userOrg" label-width="150px">
                <el-input v-model="ruleForm.userOrg" style="width: 300px;" clearable></el-input>
              </el-form-item>

              <el-form-item label="合同名称：" prop="nename" label-width="150px">
                <el-input v-model="ruleForm.nename" style="width: 300px;" clearable></el-input>
              </el-form-item>

              <el-form-item label="项目编号/预算编码：" prop="code" label-width="152px">
                <el-input v-model="ruleForm.code" style="width: 298px;" clearable></el-input>
              </el-form-item>

              <el-form-item label="合同金额(万元)：" prop="neMoney" label-width="150px">
                <el-input-number style="width: 300px;" v-model="ruleForm.neMoney" placeholder="请输入合同金额(万元)" controls-position="right" :min="0" clearable></el-input-number>
                <!--<el-input type="number" v-model="ruleForm.neMoney" clearable></el-input>-->
              </el-form-item>

              <!-- 下拉框 -->

              <el-form-item label="甲方：" prop="sex" label-width="150px">
                <el-select v-model="ruleForm.sex" placeholder="全部" style="width:300px" clearable>
                  <el-option
                    v-for="(item, index) in list1"
                    :key="index"
                    :value="item.orgId"
                    :label="item.orgName"
                  ></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="乙方：" prop="one" label-width="150px">
                <el-input v-model="ruleForm.one" disabled style="width:300px"></el-input>
              </el-form-item>

              <el-form-item
                label="降点数："
                prop="count"
                label-width="150px"
                sstyle="margin-left: 8px;"
              >
                <el-input-number style="width: 300px;" v-model="ruleForm.count" placeholder="请输入将点数" controls-position="right" :min="0" :max="1" :step="0.1" clearable></el-input-number>
                <!--<el-input type="number" v-model="ruleForm.count" clearable></el-input>-->
              </el-form-item>

              <!-- 时间 -->

              <el-form-item
                prop="signDate"
                label-width="150px"
                label="签订时间："
                required
              >
                <el-date-picker
                  style="width: 300px;"
                  v-model="ruleForm.signDate"
                  type="date"
                  placeholder="选择日期"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="timestamp"
                  default-time="00:00:00"
                ></el-date-picker>
              </el-form-item>

              <el-form-item
                prop="startDate"
                label-width="150px"
                label="开工时间："
                required
              >
                <el-date-picker
                  style="width: 300px;"
                  v-model="ruleForm.startDate"
                  type="date"
                  placeholder="选择日期"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="timestamp"
                  default-time="00:00:00"
                ></el-date-picker>
              </el-form-item>

              <el-form-item
                prop="finishDate"
                label-width="150px"
                label="完工时间："
                required
              >
                <el-date-picker
                  style="width: 300px;"
                  v-model="ruleForm.finishDate"
                  type="date"
                  placeholder="选择日期"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="timestamp"
                  default-time="00:00:00"
                ></el-date-picker>
              </el-form-item>

              <!-- 上传文件 -->
              <el-form-item label="合同附件：" label-width="150px">
                <el-upload
                  ref="upload"
                  class="upload-demo"
                  action="/api/web/proContract/ProContractFile"
                  :headers="myheader"
                  :file-list="fileList"
                  :auto-upload="true"
                  :data="FileObject"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :before-remove="beforeRemove"
                  :before-upload="beforeAvatarUpload"
                  :on-exceed="handleExceed"
                  :limit="1"
                  :on-success="handChange"
                  :multiple="true"
                >
                  <el-button
                    size="small"
                    type="primary"
                    style=" width: 300px; height: 40px;border: 1px solid #e4e4e4;"
                  >选择上传文件</el-button>
                </el-upload>
              </el-form-item>
              <!--accept=".jpg, .jpeg, .png, .pdf, .dwg, .xls, .xlsx, .doc, .docx, .JPG, .JPEG, .PNG, .PDF, .DWG, .XLS, .XLSX, .DOC, .DOCX, .zip, .rar"-->
              <div style="font-size: 12px;color: #ccc;margin-top: -10px;margin-left: 120px;margin-bottom: 12px;">文件大小不能超过10M</div>

              <el-form-item
                style="margin-left:65px;"
                prop="type"
                label-width="150px"
              >
                <div class="check-btn" style="width: 700px;margin-left: -100px;">
                  <span style="margin-right: 10px;">合同价款与支付：</span>
                  <el-checkbox v-model="checkboxSelect[0]" @click="checkboxSelect[0] = !checkboxSelect[0];">预付款</el-checkbox>
                  <el-checkbox v-model="checkboxSelect[1]" @click="checkboxSelect[1] = !checkboxSelect[1]">进度款</el-checkbox>
                  <el-checkbox v-model="checkboxSelect[2]" @click="checkboxSelect[2] = !checkboxSelect[2]">初验款</el-checkbox>
                  <el-checkbox v-model="checkboxSelect[3]" @click="checkboxSelect[3] = !checkboxSelect[3]">终验款</el-checkbox>
                </div>
              </el-form-item>

              <el-form-item style="margin-left: 88px;" v-if="checkboxSelect[0]" label-width="150px">
                <span>预付款比例：</span>
                <!--<span class="one">订单合同确认之日起</span>-->
                <!--<input
                  type="text"
                  class="main-input"
                  style="text-align:center"
                  v-model="ruleForm.input1"
                >-->
                <el-input-number v-model="ruleForm.input1" style="width: 100px;" :controls="false" :min="1" :max="100" clearable></el-input-number>
                <span class="two">%</span>
                <input
                  v-if="isNaN(ruleForm.neMoney)||isNaN(ruleForm.input1)"
                  type="text"
                  class="main-input"
                  style="text-align:center"
                >
                <input
                  v-else
                  type="text"
                  class="main-input"
                  style="text-align:center"
                  disabled
                  v-model="ruleForm.neMoney*ruleForm.input1*0.01"
                >
               <!-- <input
                  type="text"
                  class="main-input"
                  style="text-align:center"
                  v-model="ruleForm.input11"
                >-->
                <span class="two">万元</span>
              </el-form-item>
              <el-form-item style="margin-left: 88px;" v-if="checkboxSelect[1]" label-width="150px">
                <span>进度款比例：</span>
                <!--<input
                  type="text"
                  class="main-input"
                  style="text-align:center"
                  v-model="ruleForm.input2"
                >-->
                <el-input-number v-model="ruleForm.input2" style="width: 100px;" :controls="false" :min="1" :max="100" clearable></el-input-number>
                <span class="two">%</span>
                <input
                  v-if="isNaN(ruleForm.neMoney)||isNaN(ruleForm.input2)"
                  type="text"
                  class="main-input"
                  style="text-align:center"
                >
                <input
                  v-else
                  type="text"
                  class="main-input"
                  style="text-align:center"
                  disabled
                  v-model="ruleForm.neMoney*ruleForm.input2*0.01"
                >
               <!-- <input
                  type="text"
                  class="main-input"
                  style="text-align:center"
                  v-model="ruleForm.input22"
                >-->
                <span class="two">万元</span>
              </el-form-item>
              <el-form-item style="margin-left: 88px;" v-if="checkboxSelect[2]" label-width="150px">
                <span>初验款比例：</span>
                <!--<input
                  type="text"
                  class="main-input"
                  style="text-align:center"
                  v-model="ruleForm.input3"
                >-->
                <el-input-number v-model="ruleForm.input3" style="width: 100px;" :controls="false" :min="1" :max="100" clearable></el-input-number>
                <span class="two">%</span>
                <input
                  v-if="isNaN(ruleForm.neMoney)||isNaN(ruleForm.input3)"
                  type="text"
                  class="main-input"
                  style="text-align:center"
                >
                <input
                  v-else
                  type="text"
                  class="main-input"
                  style="text-align:center"
                  disabled
                  v-model="ruleForm.neMoney*ruleForm.input3*0.01"
                >
               <!-- <input
                  type="text"
                  class="main-input"
                  style="text-align:center"
                  v-model="ruleForm.input33"
                >-->
                <span class="two">万元</span>
              </el-form-item>
              <el-form-item style="margin-left: 88px;" v-if="checkboxSelect[3]" label-width="150px">
                <span>终验款提醒：</span>
                <!--<input
                  type="text"
                  class="main-input"
                  style="text-align:center"
                  v-model="ruleForm.input4"
                >-->
                <el-input-number v-model="ruleForm.input4" style="width: 100px;" :controls="false" :min="1" :max="100" clearable></el-input-number>
                <span class="two">%</span>
                <input
                  v-if="isNaN(ruleForm.neMoney)||isNaN(ruleForm.input4)"
                  type="text"
                  class="main-input"
                  style="text-align:center"
                >
                <input
                  v-else
                  type="text"
                  class="main-input"
                  style="text-align:center"
                  disabled
                  v-model="ruleForm.neMoney*ruleForm.input4*0.01"
                >
               <!-- <input
                  type="text"
                  class="main-input"
                  style="text-align:center"
                  v-model="ruleForm.input44"
                >-->
                <span class="two">万元</span>
              </el-form-item>

              <el-form-item style="margin-left: 100px;">
                <el-button type="primary" @click="submitForm('ruleForm')" style="width:180px">提交</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "addFalsecontract",
  data() {
    return {
      // 获取token
      myheader: { token: localStorage.getItem("token") },
      checkboxSelect:[false,false,false,false],
      // 获取甲方列表
      list1: [],
      // 上传文件对象
      fileCode: {},
      //上传文件列表
      fileList: [],
      //上传文件类型
      FileObject: { bizType: "contract",parentId: this.$route.params.conId },
      flag: 0,
      // 表单提交
      ruleForm: {
        count: "",
        userOrg: "",
        username: "",
        sex: "",
        signDate: "",
        finishDate: "",
        startDate: "",
        nename: "",
        neMoney: "",
        type: [],
        // one: "广州景天信息"
        one: "广州市景天通信技术有限公司",
        code:'',
        input1: "",// 预付款
        input2: "",//进度款
        input3: "",//初验款
        input4: "",//终验款
        input11: "",// 预付款
        input22: "",//进度款
        input33: "",//初验款
        input44: "",//终验款
      },
      // 表单验证
      rules: {
        signDate: [
          { required: true, message: "请选择签订日期", trigger: "blur" }
        ],
        startDate: [
          { required: true, message: "请选择开工日期", trigger: "blur" }
        ],
        finishDate: [
          { required: true, message: "请选择完工日期", trigger: "blur" }
        ],
        username: [
          { required: true, message: "请输入单项合同编号", trigger: "blur" },
          { min: 1, max: 30, message: "长度在 1 到 30 个字符", trigger: "blur" }
        ],
        userOrg: [
          { required: true, message: "请输入内部合同编号", trigger: "blur" },
          { min: 1, max: 30, message: "长度在 1 到 30 个字符", trigger: "blur" }
        ],
        count: [
          { required: true, message: "请输入降点数", trigger: "blur" },
        ],
        neMoney: [
          { required: true, message: "请输入合同金额", trigger: "blur" }
        ],
        sex: [{ required: true, message: "请选择甲方", trigger: "change" }],
        nename: [
          { required: true, message: "请输入合同名称", trigger: "blur" },
          {
            min: 1,
            max: 100,
            message: "长度在 1 到 100 个字符",
            trigger: "blur"
          }
        ],
        code: [
          {
            required: true,
            message: "请输入编码",
            trigger: "blur"
          },
          {
            min: 1,
            max: 100,
            message: "长度在 1 到 100 个字符",
            trigger: "blur"
          }
        ],
      }
    };
  },
  created() {
    // 请求获取甲方列表
    this.getJia();
  },
  methods: {
    // 获取甲方列表
    getJia() {
      let that = this;
      let suCb = res => {
        console.log(res);
        console.log(888888);
        console.log(res.data.data);
        this.list1 = res.data.data;
      };
      let erCb = res => {
        console.log(res);
      };
      let params = {};
      let req = {
        url: "/api/web/proContract/getPartya",
        methods: "post",
        data: params,
        success: suCb,
        error: erCb
      };
      that.$https(req);
    },

    // 上传文件
    // 上传成功
    handChange(res, file, fileList) {
      if (res.flag == "0") {
        this.$msg("请选择自定义文件类型上传！");
        this.fileList = [];
      } else if (res.flag == "1") {
        this.fileCode = fileList[0].response;
        this.fileList = fileList
      }
    },
    //文件移除
    handleRemove(file, fileList) {
      if(file.status == "success"){
        let params = {
          fileUrl: this.fileCode.fileUrl,
          parentId: this.$route.params.conId
        };
        let suCb = res => {
          this.fileList = [];
        };
        let req = {
          url: "/api/web/sysFile/deleteFile",
          methods: "post",
          data: params,
          success: suCb,
        };
        this.$https(req);
      }else{
        this.fileList = [];
      }
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 10;
      if (!isLt2M) {
        this.$message.error('上传文件大小不能超过 10MB!');
      }
      return isLt2M;
    },
    handlePreview(file) {
      console.log(file);
    },
    //文件限制
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    //文件移除前
    beforeRemove(file, fileList) {
//      return this.$confirm(`确定移除 ${file.name}？`);
    },
    // 存储localstorage
    clickMe(index) {
      this.flag = index;
      localStorage.setItem("flags", index);
    },
    //提交表单
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if(this.ruleForm.startDate>=this.ruleForm.signDate && this.ruleForm.startDate<=this.ruleForm.finishDate){
            if(this.fileList.length>0){
              let that = this;
              let suCb = res => {
                console.log(res);
                this.$router.push({ name: "contractList" });
                that.$msg("提交成功！");
              };
              let erCb = res => {
              };
              let params = {
                proContract: {
                  conId: that.$route.params.conId,//合同Id
                  conType: "4",//合同类型（1-框架合同、2-框架内虚拟合同、3-框架内子合同、4-单向合同5-外包合同）
                  conOuterno: that.ruleForm.username,//合同外部编号
                  conInnerno: that.ruleForm.userOrg,//合同内部编号
                  conName: that.ruleForm.nename,//合同名称
                  conPartya: that.ruleForm.sex,// 甲方
                  conPartyb: "8ff0-1130-4c97-91c8-a532a51e75fd",// 乙方
                  conMoney: that.ruleForm.neMoney,//合同金额
                  conDroppoint: that.ruleForm.count,//降点数量
                  signDate: that.ruleForm.signDate + "",//签订时间
                  finishDate: that.ruleForm.finishDate + "",//完工时间
                  startDate: that.ruleForm.startDate + "",//开始时间
                  prepayFlag: that.checkboxSelect[0]==true?'1':'0',//是否预付款提醒（0-不开启提醒，1-有提醒）
                  prepay_rate:that.ruleForm.input1,//预付款付款比例
                  prepay_money:that.ruleForm.neMoney*that.ruleForm.input1*0.01,//预付款付款金额
                  process_flag: that.checkboxSelect[1]==true?'1':'0',//是否进度款提醒（0-不开启提醒，1-有提醒）
                  process_rate:that.ruleForm.input2,//进度款付款比例
                  proces_money:that.ruleForm.neMoney*that.ruleForm.input2*0.01,//进度款付款金额
                  pre_accept_flag: that.checkboxSelect[2]==true?'1':'0',//是否初验款提醒（0-不开启提醒，1-有提醒）
                  pre_accept_rate:that.ruleForm.input3,//初验款付款比例
                  pre_accept_money:that.ruleForm.neMoney*that.ruleForm.input3*0.01,//初验款付款金额
                  final_accept_flag: that.checkboxSelect[3]==true?'1':'0',//是否终验款提醒（0-不开启提醒，1-有提醒）
                  final_accept_rate:that.ruleForm.input4,//终验款付款比例
                  final_accept_money:that.ruleForm.neMoney*that.ruleForm.input4*0.01,//终验款付款金额
                  proNo:that.ruleForm.code,//项目编码
                }
              };
              let req = {
                url: "/api/web/proContract/addContract",
                methods: "post",
                data: params,
                success: suCb,
                error: erCb
              };
              that.$https(req);
            }else{
              this.$erMsg('请先上传文件')
            }
          }else{
            this.$erMsg('开工时间应大于签订时间且小于完工时间')
          }

        } else {
          this.$erMsg("请按红色字的提示进行修改完善")
          return false;
        }
      });
    }
  }
};
</script>
<style scoped>
.component-main {
  width: 1102px;
  /* height: 1400px; */
  margin: 0 auto;
  margin-top: 49px;
  background-color: #fff;
  border: 1px solid #e4e4e4;
  border-top: none;
}

.component-main-left {
  width: 180px;
  height: 1301px;
  border: 1px solid #e4e4e4;
  padding-top: 50px;
  float: left;
  border-top: none;
}

.box1 {
  position: relative;
  width: 175px;
  height: 50px;
  text-align: left;
  line-height: 50px;
  background-color: #9ea7b4;
  color: #fff;
  padding-left: 5px;
}

.box1 .arrow {
  position: absolute;
  width: 0;
  height: 0;
  top: -40px;
  left: 180px;
  border-width: 25px 0 25px 25px;
  border-style: solid;
  border-color: transparent transparent transparent #9ea7b4;
  /*透明 透明 透明 灰*/
  margin: 40px auto;
}

/* 表单部分 */

.component-main-right {
  height: 1250px;
  float: right;
  width: 918px;
  margin: 0 auto;
  border-top: none;
  padding-top: 100px;
  border-bottom: 1px solid #e4e4e4;
  border-right: 1px solid #e4e4e4;
}

.box {
  width: 500px;
  margin: 0 auto;
}

.box .el-button--primary {
  color: #fff;
  background-color: #1abc9c;
  border-color: #1abc9c;
}

.box .el-form-item {
  width: 450px;
}

.el-form-item .el-form-item__label {
  width: 110px;
}

.el-form-item__content {
  margin-left: -103px;
}

.one {
  display: inline-block;
  width: 164px;
  height: 40px;
  background-color: #f2f2f2;
  border: 1px solid #e4e4e4;
}

.main-input {
  width: 90px;
  height: 40px;
  border: 1px solid #e4e4e4;
  margin-left: -4px;
}

.two {
  display: inline-block;
  width: 50px;
  height: 40px;
  background-color: #f2f2f2;
  border: 1px solid #e4e4e4;
  border-left: none;
  margin-left: -4px;
}
</style>
